<template>
  <div class="nav-user-item">
    <el-avatar class="nav-bar-avatar" @error="errorHandler">
      <img :src="src" />
    </el-avatar>
    <span class="nv-bar-user-role">{{roleName}}</span>
  </div>
</template>

<script>
  const headerImgUrl = require("assets/img/home/top_user_icon.png");
  export default {
    name: 'NavBarUserItem',
    props: {
      roleName: {
        type: String,
        default: "管理员"
      },
      src: {
        type: String,
        default: headerImgUrl
      }
    },
    methods: {
      errorHandler() {
        this.src = headerImgUrl;
        return true
      }
    }
  }
</script>
<style>
  .nav-user-item {
    background-color: #E2E2E2;
    width: 130px;
    padding-left: 10px;
    display: flex;
  }

  .nav-bar-avatar {
    align-self: center;
  }

  .nv-bar-user-role {
    font-size: 14px;
    align-self: center;
    margin-left: 10px;
  }
</style>
